<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Shopping Cart</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png"/>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/slick.css">
    <link rel="stylesheet" href="css/chosen.min.css">
    <link rel="stylesheet" href="css/pe-icon-7-stroke.css">
    <link rel="stylesheet" href="css/magnific-popup.min.css">
    <link rel="stylesheet" href="css/lightbox.min.css">
    <link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css">
    <link rel="stylesheet" href="css/jquery.scrollbar.min.css">
    <link rel="stylesheet" href="css/mobile-menu.css">
    <link rel="stylesheet" href="fonts/flaticon/flaticon.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="inblog-page">

<!-- 引入头部导航栏 -->
	<jsp:include page="top.jsp"></jsp:include>

<div class="site-content">
    <main class="site-main  main-container no-sidebar">
        <div class="container">
            <div class="breadcrumb-trail breadcrumbs">
                <ul class="trail-items breadcrumb">
                    <li class="trail-item trail-begin">
                        <a href="">
								<span>
									首页
								</span>
                        </a>
                    </li>
                    <li class="trail-item trail-end active">
							<span>
							购物车
							</span>
                    </li>
                </ul>
            </div>
            <div class="row">
                <div class="main-content-cart main-content col-sm-12">
                    <h3 class="custom_blog_title">
                                                                   购物车
                    </h3>
                    <div class="page-main-content">
                        <div class="shoppingcart-content">
                            <form action="shoppingcart.jsp" class="cart-form">
                                <table class="shop_table">
                                    <thead>
                                    <tr>
                                        <th class="product-remove"></th>
                                        <th class="product-thumbnail"></th>
                                        <th class="product-name"></th>
                                        <th class="product-price"></th>
                                        <th class="product-quantity"></th>
                                        <th class="product-subtotal"></th>
                                    </tr>
                                    </thead>
                                    <tbody id="pdtDetail">
                                    
                                    
                                     <tr><td class="actions"><h4><a href="login.jsp">暂未登录！请点击此处登录 </a></h4></td> </tr>
                                    
                                   
                                    </tbody>
                                </table>
                            </form>
                            <div class="control-cart">
                                <a href="gridproducts_leftsidebar.jsp">
                                <button class="button btn-continue-shopping">
                                                                                         继续选购
                                </button></a>
                                 <a onclick="checkout()"><button  class="button btn-cart-to-checkout">
                                	去结算
                                </button></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>
<!-- 引入页脚栏 -->
	<jsp:include page="footer.jsp"></jsp:include>
	
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.plugin-countdown.min.js"></script>
<script src="js/jquery-countdown.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/magnific-popup.min.js"></script>
<script src="js/isotope.min.js"></script>
<script src="js/jquery.scrollbar.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/mobile-menu.js"></script>
<script src="js/chosen.min.js"></script>
<script src="js/slick.js"></script>
<script src="js/jquery.elevateZoom.min.js"></script>
<script src="js/jquery.actual.min.js"></script>
<script src="js/fancybox/source/jquery.fancybox.js"></script>
<script src="js/lightbox.min.js"></script>
<script src="js/owl.thumbs.min.js"></script>
<script src="js/jquery.scrollbar.min.js"></script>
<script src='https://ditu.google.cn/maps/api/js?key=AIzaSyC3nDHy1dARR-Pa_2jjPCjvsOR4bcILYsM'></script>
<script src="js/frontend-plugin.js"></script>
</body>
<script type="text/javascript">
//获取购物车商品
$.post("http://localhost:8080/Greenleaf/pdtDetail/get",
		function(res) {
		  if (res.count!=0) {
			  document.getElementById("pdtDetail").innerHTML="";
			 var html = "";
			 var sum=0;
			$.each(res.data,function(index, item) {
				html+='<tr class="cart_item"><td class="product-remove"> <input type="checkbox" checked name="product" value="'+item.dId+'"><a  onclick="delPdtDetail('+item.dId+')" class="remove"></a> </td><td class="product-thumbnail"> <a href="'+item.pdtUrl+'"> <img src="'+item.pdtImg+'" alt="img" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image"></a></td><td class="product-name" data-title="Product"> <a href="'+item.pdtUrl+'" class="title">'+item.pdtName+'&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;单价（￥）：<span id="unit'+item.dId+'">'+item.unit+'</span></a><span class="attributes-select attributes-size">'+item.size+'</span> </td><td class="product-quantity" data-title="Quantity"> <div class="quantity"> <div class="control"> <a class="btn-number qtyminus quantity-minus" onclick="delNum('+item.dId+')" href="#">-</a><input type="text" id="number'+item.dId+'" value="'+item.number+'" title="Qty"  step="1" min="1" max="9" readonly="readonly" class="input-qty qty" size="6"> <a href="#" onclick="addNum('+item.dId+')" class="btn-number qtyplus quantity-plus">+</a> </div></div></td> <td class="product-price" data-title="Price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">￥</span><span id="total'+item.dId+'">'+item.total+'</span></span></td></tr>'
				 sum+=item.total;
			});
			html+='<tr><td class="actions"><div class="coupon"><label class="coupon_code">优惠:</label><input type="text" class="input-text" placeholder="暂无优惠"><a onclick="discount()" class="button"></a></div><div class="order-total"><span class="title">总价:</span><span class="total-price">￥<span id="sum">'+sum+'</span></span></div> </td> </tr>';
			document.getElementById("pdtDetail").innerHTML=html;
			document.getElementById("sum").innerHTML=sum;
		} else {
			var html='<tr><td class="actions"><h4><a href="gridproducts_leftsidebar.jsp">暂时没有商品! 快去选购吧</a></h4></td> </tr>'
			document.getElementById("pdtDetail").innerHTML=html;
		}
		 
	}, "json");
function delPdtDetail(dId){
    layer.confirm('你确定要删除吗？', function(index){
		   $.post("http://localhost:8080/Greenleaf/pdtDetail/del",
				   {"dId":dId},function(res){
            if(res){
               layer.msg('删除成功',{time:1000},function(){
            	   location.reload();
               });
            }else{
              layer.msg('删除失败，请稍后重试！');
            }
       },"json");
       layer.close(index);
	});       
}
function addNum(id){
		var number=parseInt($("#number"+id).val());
		if(number>=9){
			 layer.msg('一次性最多购买9个！');
		}else{
			var unit=parseInt($("#unit"+id).text());
			var total=parseInt($("#total"+id).text());
			var sum=parseInt($("#sum").text());
			total=total+unit;
			sum=sum+unit;
			document.getElementById("total"+id).innerHTML=total;
			document.getElementById("sum").innerHTML=sum;
			number=number+1;
			//获取产品类别
			$.post("http://localhost:8080/Greenleaf/pdtDetail/updateNumById",
					{"dId":id,"total":total,"number":number},
					function(res) {
					  if (res!=null) {
						  layer.msg('修改成功！');
					} else {
						 layer.msg('修改失败，请稍后重试！');
					}
					 
				}, "json");
		}
}
function delNum(id){
	var number=parseInt($("#number"+id).val());
	if(number<=1){
		 layer.msg('不能在减少了！');
		document.getElementById("total"+id).val;
	}else{
		var unit=parseInt($("#unit"+id).text());
		var total=parseInt($("#total"+id).text());
		var sum=parseInt($("#sum").text());
		total=total-unit;
		sum=sum-unit;
		document.getElementById("total"+id).innerHTML=total;
		document.getElementById("sum").innerHTML=sum;
		number=number-1;
		//获取产品类别
		$.post("http://localhost:8080/Greenleaf/pdtDetail/updateNumById",
				{	"dId":id,"total":total,"number":number},
				function(res) {
				  if (res!=null) {
					  layer.msg('修改成功！');
				} else {
					 layer.msg('修改失败，请稍后重试！');
				}
				 
			}, "json");
	}
}
function checkout(){	
	var ids="";
	$("input[name='product']:checked").each(function(i){
		ids+=($(this).val())+",";
	});
	ids=ids.slice(0,ids.length-1)
		$.post("http://localhost:8080/Greenleaf/pdtSize/get",
				{ "ids" : ids },
				function(res) {
				  if (!res.msg) {
					  layer.msg(res.data);
					  return false;
				} else {
					
					if(ids==""){
						layer.msg('请选择商品');
						return false;
					}
					window.location.href="checkout.jsp?ids="+ids;
				}
			}, "json");
	
}
//验证商品库存,成功则去生成订单

function discount(){
	 layer.msg('没有任何优惠劵，请多多关注官方活动！');
}
</script>

</html>